﻿<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>hCard 22 -  HTML5 time element</title>
  
  <link rel="stylesheet" href="../css/uftestsuite.css" type="text/css" />
  <link rel="stylesheet" href="../../testrunner/css/testrunner.css" type="text/css" />
  
    <link rel="stylesheet" href="../../testrunner/css/testrunner.css" type="text/css" />
  
  <script type="text/javascript" src="../../testrunner/javascript/prototype-1.6.0.2.js"></script> 
  <script type="text/javascript" src="../../testrunner/javascript/beautify.js"></script> 
  <script type="text/javascript" src="../../testrunner/javascript/sumo/microformat.js"></script>
  <script type="application/javascript;version=1.7" src="http://svn.mozilla.org/labs/operator/chrome/content/Microformats/Microformats.js"></script>
  <script type="text/javascript" src="../../testrunner/javascript/shiv/microformats-shiv.js"></script>
  <script type="text/javascript" src="../../testrunner/javascript/shiv/microformats-definition.js"></script>  
  <script type="text/javascript" src="../../testrunner/javascript/testrunner.js"></script>

 
  	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css">
	<![endif]-->
      
</head>
<body>
    
    <div class="test-fixture">
    
    <footer>
    	<a href="../"><img border="0" id="testsuite-image" alt="Microformats test suite" src="../images/testsuite.gif" /></a>
    </footer>
    
    <h1 class="summary">hCard 22 - HTML5 time element</h1>
    <p class="description">This page was design to test the use of the 
	<a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element">HTML5 time element</a> for microformat datetime structures such as birthdays</p>
    <p>From: <a href="default.htm"><span class="format">hCard</span> test suite 1.0</a></p>
    <p class="author vcard">
        Author: <a class="url fn" href="http://www.glennjones.net/">Glenn Jones</a> 
    </p>
    
    <input id="unittestbutton" type="button" onclick="microformatsTestRunner.displayTestOptionForm()" value="Unit Test Runner"/>

    
    <p>Tests:</p>
    <table id="assetTable" cellpadding="0" cellspacing="0">
	    <thead>
	        <tr>
	            <th>Test</th>
	            <th>Result</th>
	            <th>Comment</th>
	        </tr>
	    </thead>
	    <tbody>
	    
	         <tr class="assert">
	            <td class="test">vcard[0].bday</td>
	            <td class="result">IsEqualToISODate("1992-05-14")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>
	        
	         <tr class="assert">
	            <td class="test">vcard[1].bday</td>
	            <td class="result">IsEqualToISODate("1992-05-14")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>
	        	        
	        <tr class="assert">
	            <td class="test">vcard[2].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>
	        
	        <tr class="assert">
	            <td class="test">vcard[3].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30Z")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vcard[4].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00Z")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vcard[5].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30+08:00")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vcard[6].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00+08:00")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vcard[7].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00.0150")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vcard[8].bday</td>
	            <td class="result">IsEqualToISODate("2007-05-01T21:30:00.0150+08:00")</td>
	            <td class="comment">The bday or birthday from a HTML5 time element</td>
	        </tr>

	        <tr class="assert">
	            <td class="test">vcard[9].bday</td>
	            <td class="result">IsEqualTo("08:00")</td>
	            <td class="comment">The dtstart from a HTML5 time element</td>
	        </tr>

	        
	
	    </tbody>
    </table> 
    
    
    <p>History:</p>
    <ul>
    	<li class="history vevent">
	        <span class="summary">Updated</span>: <time class="dtstart" datetime="2008-08-16">16 August 2010</time> 
	        <span class="description">by Glenn Jones - Corrected day DRY violation where datetime attr differ from element content</span>
	    </li>

	    <li class="history vevent">
	        <span class="summary">Created</span>: <time class="dtstart" datetime="2008-08-14">14 August 2010</time> 
	        <span class="description">by Glenn Jones</span>
	    </li>
    </ul>
    
    
    
    </div>
  
    <div id="uf">
		<!-- This may not be the best semantic use of HTML element -->
		

		<!-- 0  -->		
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday">1992-05-14</time>
		</div>
		
		<!-- 1  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="1992-05-14">May 14th 1992</time>
		</div>
		

		<!-- 2  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30">1 May 2007</time>
		</div>
		
		
		<!-- 3  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30Z">1 May 2007</time>
		</div>

		
		<!-- 4  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30:00Z">1 May 2007</time>
		</div>


		<!-- 5  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30+08:00">1 May 2007</time>
		</div>

		
		<!-- 6  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30:00+08:00">1 May 2007</time>
		</div>


		<!-- 7  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30:00.0150">1 May 2007</time>
		</div>


		<!-- 8  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday" datetime="2007-05-01T21:30:00.0150+08:00">1 May 2007</time>
		</div>
		
		
		<!-- 9  -->
		<div class="vcard">
		   <span class="fn">John Doe</span>
		   <time class="bday">08:00</time>
		</div>


		
		
		

    </div>
    
    <footer>
        <a rel="license" href="../license.txt">Some rights reserved</a>
    </footer>
        
  
</body>

</html>